let positionState = 'idle';

const select = document.getElementById('select');

select.addEventListener('change',(event)=>{
    positionState=event.target.value;
})

const canvas = document.getElementById('canvas1');
const CANVAS_WIDTH = canvas.width = 600;
const CANVAS_HEIGHT = canvas.height = 600;
const ctx = canvas.getContext('2d');

const img = new Image();
img.src="./animate1.png";

const spriteWidth = 573;
const spriteHeight = 523;

let gameFrame = 0;
let staggerFrames = 8;

const spriteAnimations = [];
const animateStatus = [
    {
        name:"idle",
        frames:7
    },
    {
        name:"jump",
        frames:7,
    },
    {
        name:"run",
        frames:7,
    },
    {
        name:"run1",
        frames:9,
    },
    {
        name:"dizz",
        frames:11,
    },
    {
        name:"run2",
        frames:5,
    },
    {
        name:"roll",
        frames:7,
    }, 
    {
        name:"run3",
        frames:7,
    },
    {
        name:"sit",
        frames:12,
    },
    {
        name:"cry",
        frames:4,
    },                            
];

animateStatus.forEach((state,index)=>{
    let loc = [];
    for(let i=0;i<state.frames;i++){
        const positionX = i*spriteWidth;
        const positionY = index*spriteHeight;
        loc.push({
            x:positionX,
            y:positionY
        })
    }
    spriteAnimations[state.name]= {
        loc
    };
});

function animate(){
    ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
    const position = Math.floor(gameFrame/staggerFrames) % spriteAnimations[positionState].loc.length;
    let frameX = spriteAnimations[positionState].loc[position].x;
    let frameY = spriteAnimations[positionState].loc[position].y;
    ctx.drawImage(img,frameX,frameY,spriteWidth,spriteHeight,0,0,spriteWidth,spriteHeight);
    gameFrame++;
    requestAnimationFrame(animate);

}

animate();